<template>
    <Transition>
        <div class="dialog" v-if="flag">
            <div class="add_box">
                <div class="title">报修类型</div>
                <div class="inputBox">
                    <p class="inputName">报修类型 </p>
                    <input type="text" class="myInput" placeholder="请填写报修类型" v-model="form.name">
                </div>
                <div class="footer">
                    <button class="close" @click="clear">取消</button>
                    <button class="confirm" @click="addHandle">确认</button>
                </div>
            </div>
        </div>
    </Transition>
</template>

<script>
import { httpService } from "@/utils/httpService";
import Icon from '@/components/Icon.vue';
import { ElMessageBox } from "element-plus";
import { mapState, mapActions } from 'vuex';
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { ElMessage, ElForm, ElLoading } from "element-plus";


export default {
    name: "leftMenu",
    components: { Icon, ElMessageBox, ElLoading, ArrowDown, ArrowUp },
    data() {
        return {
            active: "",
            list: [],
            user: {},
            flagId: 1,
            flag: false,
            activeIndex: 0,
            title: "",
            fullscreenLoading: false,
            form: {
                id: "",
                name: "",
            }
        };
    },
    computed: {
    },
    mounted() {
    },
    watch: {
    },
    methods: {
        addHandle() {
            if (!this.form.name) {
                ElMessage.error("请填写报修类型")
            } else {
                this.fullscreenLoading = true
                let params = new FormData()
                params.append("name", this.form.name)
                if (this.form.id) {
                    params.append("id", this.form.id)
                    httpService("/javaApi/repairTypeInfo/edit", params, "post").then((data) => {
                        this.fullscreenLoading = false
                        if (data.code == 200) {
                            ElMessage.success("修改成功");
                            this.clear();
                            this.$parent.getList();
                        } else {
                            ElMessage.error("修改失败");
                        }
                    });
                } else {
                    httpService("/javaApi/repairTypeInfo/add", params, "post").then((data) => {
                        this.fullscreenLoading = false
                        if (data.code == 200) {
                            ElMessage.success("添加成功");
                            this.clear();
                            this.$parent.getList();
                        } else {
                            ElMessage.error("添加失败");
                        }
                    });
                }
            }
        },

        queryById(id) {
            httpService("/javaApi/repairTypeInfo/queryById", { id: id }, "get").then((data) => {
                this.form = data

            });
        },
        clear() {
            this.flag = false
            this.form.name = ""
        },
    },
}
</script>

<style scoped>
.dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.add_box {
    padding: 20px 20px 30px;
    background-color: #fff;
    border-radius: 3px;
    width: 600px;
    margin-top: 150px;
}

.title {
    color: #000;
    font-size: 18px;
}


.inputBox {
    margin-bottom: 15px;
    margin-top: 30px;
}

.inputName {
    color: #333333;
    font-size: 14px;
    margin-bottom: 5px;
}

.myInput {
    width: calc(100% - 13px);
    height: 33px;
    border-radius: 3px;
    border: 1px solid #CCCCCC;
    outline: none;
    font-size: 14px;
    color: #000;
    padding-left: 10px;
}

.myInput::placeholder {
    color: #A9B6BB;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 50px;
}

.close {
    border: 1px solid #CCCCCC;
    background-color: #fff;
    border-radius: 3px;
    color: #666666;
    font-size: 16px;
    width: 80px;
    height: 35px;
    outline: none;
    cursor: pointer;
}

.confirm {
    width: 80px;
    height: 35px;
    background-color: #007EFF;
    border-radius: 3px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    margin-left: 20px;
    cursor: pointer;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>